/**
 * Fichier de gestion de l'affichage des cellules
 */
function Vue(){
    //Constantes
    
    /**
     * Largeur du Canvas
     *
     * @type {Number}
     */
    this.LARGEUR_CANVAS = 800;
    /**
     * Hauteur du Canvas
     *
     * @type {Number}
     */
    this.HAUTEUR_CANVAS = 600;
    /**
     * Largeur de la zone de dessin du canvas
     *
     * @type {Number]
     */
    this.LARGEUR_ZONE_DESSIN = 800;
    /**
     * Hauteur de la zone de dessin du canvas
     *
     * @type {Number]
     */
    this.HAUTEUR_ZONE_DESSIN = 600;
    /**
     * Largeur de la zone de dessin du canvas
     *
     * @type {Number]
     */
    this.LARGEUR_ZONE_SLIDERS = 600;
    /**
     * Hauteur de la zone des sliders du canvas
     *
     * @type {Number]
     */
    this.HAUTEUR_ZONE_SLIDERS = 450;
    /**
     * Largeur de la zone des sliders du canvas
     *
     * @type {Number]
     */
    this.LARGEUR_ZONE_MENU = 600;
    /**
     * Hauteur de la zone de menu du canvas
     *
     * @type {Number]
     */
    this.HAUTEUR_ZONE_MENU = 450;
    /**
     * Longueur de la barre du slider
     *
     * @type {Number}
     */
    this.LONGUEUR_SLIDER = 100;
    //Variables
    this.canvas = document.getElementById('canvas');
    
    
    /**
     * Methode redessinant la zone d'evolution des cellules a partir
     * du monde passe en parametre
     * La methode trace un carre blanc qui recouvre le precedent dessin
     * et affiche ensuite les contenus du tableau du monde
     *
     * @param {Object} monde Monde a dessiner
     */
    this.paint = function(monde, canvas){
        var context = this.canvas.getContext("2d");
        context.fillStyle = "white";
        context.fillRect(0, 0, this.LARGEUR_ZONE_DESSIN, this.HAUTEUR_ZONE_DESSIN);
        for (var i = 0; i < monde.tabCellule.length; i++) {
            this.drawCellule(monde.tabCellule[i], this.canvas);
        }
        for (var i = 0; i < monde.tabMolecule.length; i++) {
            this.drawMolecule(monde.tabMolecule[i], this.canvas);
        }
        for (var i = 0; i < monde.tabCc.length; i++) {
            this.drawCc(monde.tabCc[i], this.canvas);
        }
    };
    
    /**
     * Dessine une cellule
     *
     * @param {Object} cellule Cellule a dessiner
     * @param {Object} canvas Canvas sur lequel dessiner la molecule
     */
    this.drawCellule = function(cellule, canvas){
        var contexte = canvas.getContext("2d");
        var x = cellule.x;
        var y = cellule.y;
        var taille = cellule.TAILLE;
        var nom = cellule.nom;
        
        switch (nom) {
            case 'Brasseryte':
                //Dessin du cercle exterieur gris
                contexte.beginPath();
                contexte.arc(x, y, taille / 3, 0, Math.PI * 2, true);
                contexte.fillStyle = "grey";
                contexte.fill();
                contexte.closePath();
                //Dessin des 4 rectangles
                contexte.fillRect(x, y - 8, 16, 16);
                contexte.fillRect(x, y - 8, -16, 16);
                contexte.fillRect(x - 8, y, 16, -16);
                contexte.fillRect(x - 8, y, 16, 16);
                contexte.fill();
                contexte.strokeStyle = cellule.couleur;
                contexte.strokeRect(x, y - 8, 16, 16);
                contexte.strokeRect(x, y - 8, -16, 16);
                contexte.strokeRect(x - 8, y, 16, -16);
                contexte.strokeRect(x - 8, y, 16, 16);
                contexte.stroke();
                //Dessin du cercle interieur, blanc
                contexte.beginPath();
                contexte.fillStyle = "white";
                contexte.arc(x, y, taille / 5, 0, Math.PI * 2, true);
                contexte.fill();
                contexte.closePath();
                break;
            case 'Kommyte':
                //Dessin du cercle exterieur gris
                contexte.beginPath();
                contexte.arc(x, y, taille / 3, 0, Math.PI * 2, true);
                contexte.fillStyle = "grey";
                contexte.fill();
                contexte.closePath();
                //Dessin des 4 rectangles
                contexte.strokeStyle = cellule.couleur;
                contexte.strokeRect(x, y - 8, 16, 16);
                contexte.strokeRect(x, y - 8, -16, 16);
                contexte.strokeRect(x - 8, y, 16, -16);
                contexte.strokeRect(x - 8, y, 16, 16);
                contexte.stroke();
                //Dessin du cercle interieur, blanc
                contexte.beginPath();
                contexte.fillStyle = "grey";
                contexte.arc(x, y, taille / 5, 0, Math.PI * 2, true);
                contexte.fill();
                contexte.closePath();
                break;
            case 'Polakocyte':
                //Dessin du cercle central gris
                contexte.beginPath();
                contexte.fillStyle = "grey";
                contexte.arc(x, y, taille / 3, 0, Math.PI * 2, true);
                contexte.fill();
                contexte.closePath();
                //Dessin des 4 rectangles
                contexte.strokeStyle = cellule.couleur;
                contexte.strokeRect(x, y - 8, 16, 16);
                contexte.strokeRect(x, y - 8, -16, 16);
                contexte.strokeRect(x - 8, y, 16, -16);
                contexte.strokeRect(x - 8, y, 16, 16);
                contexte.stroke();
                //Dessin du cercle interieur, blanc
                contexte.beginPath();
                contexte.fillStyle = "white";
                contexte.arc(x, y, taille / 5, 0, Math.PI * 2, true);
                contexte.fill();
                contexte.closePath();
                //Dessin du cercle exterieur, noir
                contexte.beginPath();
                contexte.strokeStyle = "black";
                contexte.arc(x, y, (taille / (2.3)), 0, Math.PI * 2, true);
                contexte.stroke();
                contexte.closePath();
                break;
            case 'Samuelocyte':
                //Dessin du cercle central gris
                contexte.beginPath();
                contexte.fillStyle = "grey";
                contexte.arc(x, y, taille / 3, 0, Math.PI * 2, true);
                contexte.fill();
                contexte.closePath();
                //Dessin du cercle interieur, blanc
                contexte.beginPath();
                contexte.fillStyle = "white";
                contexte.arc(x, y, taille / 5, 0, Math.PI * 2, true);
                contexte.fill();
                contexte.closePath();
                //Dessin du cercle exterieur, noir
                contexte.beginPath();
                contexte.strokeStyle = "black";
                contexte.arc(x, y, (taille / 3), 0, Math.PI * 2, true);
                contexte.stroke();
                contexte.closePath();
                //Dessin des 4 rectangles
                contexte.strokeStyle = cellule.couleur;
                contexte.strokeRect(x, y - 8, 16, 16);
                contexte.strokeRect(x, y - 8, -16, 16);
                contexte.strokeRect(x - 8, y, 16, -16);
                contexte.strokeRect(x - 8, y, 16, 16);
                contexte.stroke();
                break;
            case 'Zimbabwyte':
                //Dessin du cercle milieu blanc
                contexte.beginPath();
                contexte.fillStyle = "white";
                contexte.arc(x, y, taille / 3, 0, Math.PI * 2, true);
                contexte.fill();
                contexte.closePath();
                //Dessin du cercle interieur, gris
                contexte.beginPath();
                contexte.fillStyle = "grey";
                contexte.arc(x, y, taille / 5, 0, Math.PI * 2, true);
                contexte.fill();
                contexte.closePath();
                //Dessin du cercle exterieur, noir
                contexte.beginPath();
                contexte.strokeStyle = "black";
                contexte.arc(x, y, (taille / 3), 0, Math.PI * 2, true);
                contexte.stroke();
                contexte.closePath();
                //Dessin des 4 rectangles
                contexte.strokeStyle = cellule.couleur;
                contexte.strokeRect(x, y - 8, 16, 16);
                contexte.strokeRect(x, y - 8, -16, 16);
                contexte.strokeRect(x - 8, y, 16, -16);
                contexte.strokeRect(x - 8, y, 16, 16);
                contexte.stroke();
                break;
            default:
                alert('Cellule inexistante : ' + nom);
                break;
        }
    };
    
    /**
     * Fonction qui permet de dessiner une molecule en fonction
     * de son type (donne par son nom) ainsi que sa position
     * (recuperee par l'objet
     *
     * @param {Object} molecule Molecule a dessiner
     * @param {Object} canvas Canvas sur lequel dessiner la molecule
     */
    this.drawMolecule = function(molecule, canvas){
        var contexte = canvas.getContext("2d");
        contexte.fillStyle = "gray";
        var x = molecule.x;
        var y = molecule.y;
        var nom = molecule.nom;
        switch (nom) {
            case 'Haricoine':
                contexte.fillRect(x - 6, y - 8, 4, 6);
                contexte.fillRect(x - 2, y - 2, 6, 4);
                contexte.fillRect(x + 4, y - 8, 4, 6);
                contexte.fillRect(x, y + 2, 2, 6);
                break;
            case 'Carottoine':
                contexte.fillRect(x - 10, y - 2, 6, 6);
                contexte.fillRect(x - 4, y - 6, 8, 4);
                contexte.fillRect(x - 4, y + 4, 8, 4);
                contexte.fillRect(x + 4, y - 2, 6, 6);
                contexte.fillRect(x - 2, y, 2, 2);
                contexte.fillRect(x + 10, y, 6, 2);
                break;
            case 'Pommine':
                contexte.fillRect(x - 13, y - 6, 8, 4);
                contexte.fillRect(x - 13, y + 2, 8, 4);
                contexte.fillRect(x - 7, y - 2, 10, 4);
                contexte.fillRect(x + 3, y - 6, 4, 12);
                contexte.fillRect(x + 7, y - 4, 4, 8);
                contexte.fillRect(x + 11, y - 2, 4, 4);
                break;
            case 'Oppiomine':
                contexte.fillRect(x - 8, y - 11, 4, 4);
                contexte.fillRect(x - 4, y - 7, 4, 4);
                contexte.fillRect(x, y - 3, 4, 4);
                contexte.fillRect(x - 4, y + 1, 4, 4);
                contexte.fillRect(x - 8, y + 5, 4, 4);
                contexte.fillRect(x + 2, y - 11, 4, 8);
                contexte.fillRect(x + 2, y + 1, 4, 8);
                break;
            case 'Bretoine':
                contexte.fillRect(x - 12, y - 2, 4, 4);
                contexte.fillRect(x - 8, y - 6, 4, 4);
                contexte.fillRect(x - 8, y + 2, 4, 4);
                contexte.fillRect(x - 4, y - 10, 4, 20);
                contexte.fillRect(x, y - 14, 4, 4);
                contexte.fillRect(x, y - 2, 8, 4);
                contexte.fillRect(x, y + 10, 4, 4);
                break;
            case 'Kiwine':
                contexte.fillRect(x - 13, y - 12, 4, 4);
                contexte.fillRect(x - 13, y - 4, 4, 8);
                contexte.fillRect(x - 9, y - 8, 4, 4);
                contexte.fillRect(x - 9, y + 4, 4, 4);
                contexte.fillRect(x - 5, y - 12, 8, 4);
                contexte.fillRect(x - 3, y - 3, 4, 4);
                contexte.fillRect(x - 5, y + 8, 8, 4);
                contexte.fillRect(x + 3, y - 8, 4, 4);
                contexte.fillRect(x + 3, y + 4, 4, 4);
                contexte.fillRect(x + 7, y - 4, 4, 8);
                contexte.fillRect(x + 7, y + 8, 4, 4);
                break;
            case 'Mongoloine':
                contexte.fillRect(x - 11, y - 6, 4, 4);
                contexte.fillRect(x - 11, y + 2, 8, 4);
                contexte.fillRect(x - 11, y + 10, 4, 4);
                contexte.fillRect(x - 3, y - 10, 4, 24);
                contexte.fillRect(x + 1, y - 2, 8, 4);
                contexte.fillRect(x + 5, y - 10, 4, 4);
                contexte.fillRect(x + 5, y + 6, 4, 4);
                break;
            default:
                alert('Molecule inexistante [Vue~l.233] : ' + nom);
                //TODO : creation d'une nouvelle molecule du nom donne par l'utilisateur + MAJ de la doc de la classe
                break;
        }
    };
    
    /**
     * Fonction qui permet de dessiner le Cc passe en
     * parametre
     *
     * @param {Object} cc Cyclamide Cruzeide a dessiner
     * @param {Object} canvas Canvas servant de support au dessin
     */
    this.drawCc = function(cc, canvas){
        var contexte = canvas.getContext("2d");
        contexte.fillStyle = "gray";
        var x = cc.x;
        var y = cc.y;
        var nom = cc.nom;
        switch (nom) {
            case 'Acetone':
                contexte.fillRect(x - 4, y + 2, 2, 2);
                contexte.fillRect(x - 2, y - 4, 2, 6);
                contexte.fillRect(x, y, 6, 2);
                contexte.fillRect(x + 4, y + 2, 2, 2);
                break;
            case 'Acide sulfurique':
                contexte.fillRect(x - 3, y - 2, 4, 2);
                contexte.fillRect(x - 3, y + 2, 4, 2);
                contexte.fillRect(x - 1, y, 6, 2);
                contexte.fillRect(x + 3, y - 2, 2, 6);
                break;
            case 'Benzene':
                contexte.fillRect(x - 3, y, 2, 2);
                contexte.fillRect(x - 1, y - 4, 2, 8);
                contexte.fillRect(x + 1, y, 2, 4);
                contexte.fillRect(x + 3, y, 2, 2);
                break;
            case 'Eau':
                contexte.fillRect(x - 3, y, 2, 2);
                contexte.fillRect(x - 1, y - 2, 2, 6);
                contexte.fillRect(x + 1, y - 2, 2, 6);
                contexte.fillRect(x + 3, y, 2, 2);
                break;
            case 'Ethanol':
                contexte.fillRect(x - 1, y - 4, 2, 8);
                contexte.fillRect(x + 1, y + 2, 2, 4);
                break;
            default:
                alert('Cc inexistant : ' + nom);
                //TODO : creation d'un nouveau cc du nom donne par l'utilisateur + MAJ de la doc de la classe
                break;
        }
    };
}

